import React from "react";
import styles from "./index.module.scss";
import {NumberSize, Resizable } from "re-resizable";

interface IResizeProps {
  resizeChartSize?: ({width, height}: NumberSize) => void;
  width?: number;
  height?: number;
  scale?: number;
}

interface IResizeState {

}

export default class ResizeBox extends React.PureComponent<IResizeProps, IResizeState> {
  static defaultProps = {
    width: 10,
    height: 10
  }

  public resizable: any;

  constructor(props: IResizeProps) {
    super(props);
    this.resizable = null;
  }



  componentDidMount(): void {

  }

  componentWillReceiveProps(nextProps: Readonly<IResizeProps>, nextContext: any): void {
    if(this.props.width !== nextProps.width || this.props.height !== nextProps.height){
      this.updateResizableSize({width: nextProps.width || 10, height: nextProps.height|| 10})
    }
  }

  updateResizableSize({width, height}: NumberSize) {
    if (this.resizable) {
      this.resizable.updateSize({width, height});
    }
  }

  getResizeEnable() {
    return {
      right: false, bottom: false, bottomRight: false,
      top: false,
      left: false,
      topRight: false, bottomLeft: false, topLeft: false
    }
  }

  render(): React.ReactNode {
    const {width = 10, height = 10, scale} = this.props;

    return <div className={styles.resize_container}>
      <Resizable
        defaultSize={{width, height}}
        // resizeRatio={this.state.scale}
        scale={scale}
        enable={this.getResizeEnable()}
        className={styles.resizableBox}
        handleClasses={{
          right: styles.rightHandler,
          bottom: styles.bottomHandler,
          bottomRight: styles.bottomRightHandler,
        }}
        // onResizeStop={(event, direction, elementRef, delta: NumberSize) => {
        //   this.props.resizeChartSize(delta);
        // }}
        onResize={() => {

        }}
        ref={c => {
          this.resizable = c;
        }}
      >
        <div className={styles.resize}/>
      </Resizable>
    </div>;
  }
}
